<template>
  <div class="source_from">
    <el-tabs v-model.trim="reportName" type="card" class="header">
      <el-tab-pane :label="$t('report.searchEngine')" name="SearchEngine">
      </el-tab-pane>
      <el-tab-pane :label="$t('report.area')" name="areas">
      </el-tab-pane>
      <el-tab-pane :label="$t('report.seoKeywords')" name="KeyWords">
      </el-tab-pane>
      <el-tab-pane :label="$t('report.fromUrl')" name="SourcePage">
      </el-tab-pane>
      <el-tab-pane :label="$t('report.Leading')" name="Landing">
      </el-tab-pane>
      <keep-alive>
        <component :is="reportName" class="content"></component>
      </keep-alive>
    </el-tabs>
  </div>
</template>
<script>
  // import areas from './form/Area'
  import KeyWords from './form/OldKeyWords'
  import SearchEngine from './form/OldSearchEngine'
  import SourcePage from './form/SourcePage'
  import Landing from './form/Landing'
  export default {
    name: 'source_from',
    data () {
      return {
        reportName: 'SearchEngine'
      }
    },
    computed: {
    },
    components: {
      areas: function (resolve) {
        // 异步组件写法
        require(['./form/Area'], resolve)
      },
      // areas,
      KeyWords,
      SourcePage,
      SearchEngine,
      Landing
    },
    methods: {
    }
  }
</script>
